<%@page import="org.proddevplm.constants.UserConstants"%>
<%@page import="org.proddevplm.dao.data.Project"%>
<%@page import="org.proddevplm.dao.data.RelationMatrix"%>
<%@page import="org.proddevplm.dao.data.Roles"%>
<%@page import="org.proddevplm.dao.data.User"%>
<%@page import="java.util.List"%>
<%@page import="org.proddevplm.constants.ControllerConstants"%>
<%@page import="org.proddevplm.business.dataAccess.constants.DataAccessConstants"%>

<%
	User user;
	Roles role;
	String currentRole = "";
	List relMatrixUser = (List)session.getAttribute("relMatrixUser");
	int projectId = (Integer)session.getAttribute("projectId");
	for (int index=0; index<relMatrixUser.size(); index++){
		RelationMatrix rm = (RelationMatrix)relMatrixUser.get(index);
		Project userProject = rm.getProject();
		if(userProject.getId()==projectId){
			Roles userRole = rm.getRole();
			currentRole = userRole.getRole();
		}
	}

	List relMatrix = (List)session.getAttribute("relationMatrix");
	RelationMatrix aux = (RelationMatrix)relMatrix.get(0);
	Project project = aux.getProject();
	
	List allUsers = (List)session.getAttribute("allUsers");
	List allRoles = (List)session.getAttribute("allRoles");
%>

<script>
	var flag = false;
	<%if(relMatrix.size()!=0)%> flag = true;
	
	$(function(){
		$( "button" ).button();
		
		$('.helpImg').mouseover(function () {
		    $(this).css("cursor", "pointer");
		 });

		$('.helpImg').mouseout(function () {
		    $(this).css("cursor","default");	    
		 });
		
		$("#projectTeam").tablesorter({
        	widthFixed:true,
			debug:false,
			widgets:['zebra'],
			headers: {
        		5 : {sorter: false}
        	}
        })
        if(flag){
        	$("#projectTeam")
        	.tablesorterPager({container: $("#teamPager")})
			
			.tablesorterFilter({filterContainer: "#teamFilter-box",
	     		filterClearContainer: "#teamFilter-clear-button",
	            filterCaseSensitive:false,
	            filterColumns: [0,1,2,3,4]
			});
        }
	});
	
	$( "#addProjectMember" )
	.button()
	.click(function() {
		$( "#dialog-form" ).dialog( "open" );
	});
	
	$( "#dialog-form" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Add new member": function() {
				var arguments = buildParameter("selectUser")+"&"+buildParameter("selectRole");
				ajaxCall("userManager", "7", arguments, null);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});
	
	function changeUserRole(projectId, userId, roleId, name){
		$('#selectedProjectId').val(projectId);
		$('#selectedUserId').val(userId);
		$('#exRole').val(roleId);
		$("#showName").html(name);
		$("#dialog-change").dialog("open");
	}	
	
	$( "#dialog-change" ).dialog({
		autoOpen: false,
		height: 350,
		width: 350,
		modal: true,
		buttons: {
			"Change role": function() {
				var arguments = buildParameter("selectedProjectId")+"&"+buildParameter("selectedUserId")+"&"+buildParameter("exRole")+"&"+buildParameter("changeRole");
				ajaxCall("userManager", "9", arguments, null);
				$( this ).dialog( "close" );
				},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			$( this ).dialog( "close" );
		}
	});	
	
	function refreshTable(){
		document.forms["refresh"].submit();
	}
	
	function removeMem(projectId, userId, roleId){
		var confirmDeletion = confirm("Are you sure you want to remove this member?");
		if(confirmDeletion){
			var arguments = "projectId="+projectId+"&userId="+userId+"&roleId="+roleId;
			ajaxCall("userManager", "8", arguments, null);
			alert('Member successfuly removed. Please refresh the table');
		}
		
	}
	
	
</script>

<div style="font-family:verdana; font-size:medium; color:darkblue; text-align:center; margin-top:20px; margin-bottom:20px">Team of <%=project.getName()%> project</div>


<div align="center">

	<div style="width:auto">
		
		<%if(currentRole.equals("Project Manager")){ %>
			<div id="buttons" style="width:100%; ">
				<button id="addProjectMember" name="addProjectMember" style="width:130px; font-weight: bold; float:left;">Add member</button>
				<button id="refreshTable" name="refreshTable" onclick="refreshTable()" style="width:130px; font-weight:bold; float:right; ">Refresh table</button>
			</div>
			<div style="clear:both;"></div>
		<%} %>
		
		<div style="float:right; margin-bottom:-10px; text-align:right; margin-top:10px">
			Search table: <input name="filter" id="teamFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
			<input id="teamFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
		</div>
		<div style="clear:both;"></div>
	
		<table id="projectTeam" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB">
		
			<thead>
				<tr>
					<th>Member</th>
					<th>Role in project</th>
					<th>Company</th>
					<th>Position</th>
					<th>Contact</th>
					<%if (currentRole.equals("Project Manager")){ %>
						<th>Action</th>
					<%} %>
				</tr>
			</thead>
			
			<tbody>
				<% 
				if(relMatrix != null){
					for(int i=0; i<relMatrix.size(); i++){
						RelationMatrix rm = (RelationMatrix)relMatrix.get(i);
						user = rm.getUser();
						role = rm.getRole();%>
						<tr>
							<td><%=user.getSurname()+" "+user.getName() %></td>
							<td><%=role.getRole()%></td>
							<td><%=user.getCompany()%></td>
							<td><%=user.getPosition()%></td>
							<td>
								<div style="float:left">
									<%=user.getEmail()%>
								</div>	
								<a href="mailto:<%=user.getEmail()%>?Subject=Mail%20from%20@PLM%20platform">
									<img src="/proddev/images/email.png" align="middle" width="20" height="20" style="float:right; border:0"/>	
								</a>
							</td>
							<%if (currentRole.equals("Project Manager")){ %>
								<td style="text-align: center;">
									<img class="helpImg" src="/proddev/images/delete1.png" onclick="removeMem('<%=projectId%>' ,'<%=user.getId()%>', '<%=role.getId()%>')" align="middle" width="20" height="20"/>
									<img class="helpImg" src="/proddev/images/edit.png" onclick="changeUserRole('<%=projectId%>', '<%=user.getId()%>', '<%=role.getId()%>', '<%=user.getSurname()+" "+user.getName()%>')" align="middle" width="20" height="20"/>
								</td>
							<%} %>
						</tr>
						
					<%}
				}				
				%>		
			
			</tbody>
		
		</table>
		
		<div id="teamPager" class="pager" style="float:right; margin-top:-10px">
			<form>
				<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
				<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
				<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
				<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
				<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
				<select class="pagesize" style="height:20px;">
					<option SELECTED value="5">set paging</option>
					<option value="5">5 per page</option>
					<option value="10">10 per page</option>
					<option value="20">20 per page</option>
					<option value="30">30 per page</option>					
				</select>
			</form>
		</div>	
		<div style="clear:both"></div>
	
	</div>
	
	<!-- Dialog box for adding new member on the project -->
	
	<div id="dialog-form" title="Add new member" style="font-family:verdana; font-size:small; display:none">
		<p>Please select the user and associate a role</p>

		<form name="addNewMember" method="post">
			
			<fieldset>
				<div>Select User</div>	
				<select name="selectUser" id="selectUser" size="1" style="width:100%; margin-top:10px";>
					<%
					for (int i=0; i<allUsers.size(); i++){
						 User u = (User)allUsers.get(i);%>
							<option value="<%=u.getId()%>"><%=u.getSurname()+" "+u.getName()%></option>
					<%}%>
				</select>
				<div style="margin-top:20px;">Select Role</div>
				<select name="selectRole" id="selectRole" size="1" style="width:100%; margin-top:10px" >
					<%
					for (int i=0; i<allRoles.size(); i++){
						 Roles r = (Roles)allRoles.get(i);%>
							<option value="<%=r.getId()%>"><%=r.getRole()%></option>
					<%}%>
				</select>				
			</fieldset>
		</form>
	</div>
	
	<div id="dialog-change" title="Change user's role" style="font-family:verdana; font-size:medium; display:none">
		<p>Select a new role for the user</p>
		<form name="changeRole" method="post">
			<input type="hidden" name="selectedProjectId" id="selectedProjectId">
			<input type="hidden" name="selectedUserId" id="selectedUserId">
			<input type="hidden" name="exRole" id="exRole">
			<fieldset>
				<div id="showName" style="font-size:medium; font-weight:bold;"></div>
				<div style="margin-top:20px">Role</div>
				<select name="changeRole" id="changeRole" size="1" style="width:100%; margin-top:10px" >
					<%
					for (int i=0; i<allRoles.size(); i++){
						 Roles r = (Roles)allRoles.get(i);%>
							<option value="<%=r.getId()%>"><%=r.getRole()%></option>
					<%}%>
				</select>	
			</fieldset>
		
		</form>
	
	</div>
		
	<form name="refresh" method="post" action="/proddev/controller">
		<input type = "hidden" name = "<%=ControllerConstants.MANAGER_KEY%>" value = "<%=ControllerConstants.DATA_ACCESS_MANAGER %>"/>
		<input type = "hidden" name = "<%=ControllerConstants.METHOD_KEY%>" value = "<%=DataAccessConstants.TEAM%>"/>
	</form>

</div>